<template>
	<view class="cardDetails">
		<headTop>
			<uv-navbar title="卡号详情" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>

		<view style="background-color: rgba(255, 255, 255, 0.4)">
			<uv-image
				src="https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/05b506158a7f4624b78f147c80412822.jpg"
				width="100%" mode="aspectFit"></uv-image>
		</view>

		<view style="padding: 0 3vw; background-color: rgba(255, 255, 255, 0.6)">
			<view style="font-size: 20px; font-weight: 600; padding-top: 3vw">电信沧泉卡【29元235G+100分钟】</view>
			<view style="color: #999; margin: 1vw 0">29元205通用+30G定向+100分钟通话</view>
			<viwe style="font-size: 20px; color: red; font-weight: 600">
				29 元/月
				<text style="text-decoration: line-through; color: #999; font-size: 14px; font-weight: 500">原价198</text>
			</viwe>
			<view class="view_5">
				<view class="view_5_tit">
					<text>通用流量</text>
					<text>定向流量</text>
					<text>通话时长</text>
				</view>
				<view class="view_5_cen">
					<text>160G</text>
					<text>0G</text>
					<text>100分钟</text>
				</view>
			</view>

			<viwe style="margin-top: 6vw">
				<view class="title" style="text-align: center">
					<view class="title-text">产品介绍</view>
					<image class="title-img" src="/static/images/tag.png"></image>
				</view>

				<view style="margin-top: 3vw">
					<image style="width: 100%" mode="widthFix"
						src="https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/d89bb2a545204bdfac309b9edaa86b31.jpg">
					</image>
				</view>
			</viwe>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";

	/* ------------------------------------------------------------跳转上一页----------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
</script>

<style lang="scss">
	.cardDetails {
		.view_5 {
			border-radius: 5px;
			margin-top: 3vw;

			text {
				width: 33.3%;
				text-align: center;
				border: 1px solid #966417;
			}

			.view_5_tit {
				display: flex;
				background: #fcf8eb;
				border-radius: 5px 5px 0 0;
			}

			.view_5_cen {
				display: flex;
				background: #fcf8eb;
				border-radius: 0 0 5px 5px;
			}
		}

		.title {
			.title-img {
				height: 1.5vw;
				width: 26vw;
			}

			.title-text {
				font-weight: 600;
				transform: translate(-1vw, 4vw);
				font-size: 36rpx;
				position: relative;
				z-index: 99;
			}
		}
	}
</style>